<template>
	<view class="container">
		<view class="option" :class="{'isClick':isClick}" v-for="(item, index) in props.option.options" :key="index"
			@click="radioClick(item.options,index)" :style="maxHeight(item.options.length)">
			<view :ref="(ref)=>(nums.push(ref))"
				:class="{'checked':item.checked,'num':true,'iceAnimation':props.k == 0}">
				{{GLOBAL_NUM[index]}}
			</view>
			<view class="ctt" :class="{'cttChecked':item.checked,'iceAnimationNoLeft':props.k == 0}">
				{{item.options}}
			</view>
			<iceImage :options_img="item.options_img" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		// getCurrentInstance 
	} from 'vue'
	import {
		BASE_URL
	} from '../../../../src/api/config';
	import {
		GLOBAL_NUM
	} from '../../../../utils/dict';
	import {
		iceDelay
	} from '../../../../utils/function';
	import iceImage from '@/components/widget/iceImage/index.vue'
	const isClick = ref(true)
	const scaleFlag = ref(0)
	const nums = ref([]) // 这种方法在uniapp里不能用，也可以说不管是uniapp还是小程序都不支持ref获取dom
	const maxHeight = (e) => {
		const rowNum = Math.ceil(e / 18)
		return {
			height: `${rowNum == 1 ? 40 : rowNum * 15 + 40}px`
		}
	}
	onMounted(() => {
		iceAnimation()
	})
	const iceAnimation = () => {
		const numDom = document.getElementsByClassName('iceAnimation')
		let i = 0
		for (let item of numDom) {
			i++
			iceDelay(i * 150).then(() => {
				item.style.marginLeft = '0px'
				if (item.nextSibling.style) item.nextSibling.style.color = '#000'
			});
		}
	}
	const emits = defineEmits(['fontSizeConfig','answer'])
	const props = defineProps({
		option: {
			type: Object
		},
		k: {
			type: Number
		}
	})
	const radioClick = (name, index) => {
		if (props.option.type == 1) {
			props.option.options.forEach((v,k,array) => {
				array[k].checked = index == k ? true : false
			});
		} else {
			props.option.options[index].checked = !props.option.options[index].checked
		}
		const answerArr = []
		props.option.options.forEach((v,k) => {
			if(v.checked){
				answerArr.push(GLOBAL_NUM[k])
			}
		})
		emits('answer',{'index':props.k,'question_id':props.option.id,'type':props.option.type,'score':props.option.score,'answer':answerArr.toString()})
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 85%;
		height: 52vh;
		overflow: scroll;
		margin: 20px auto;
		.option {
			width: 98%;
			height: 40px;
			border: 1px $uni-color-primary solid;
			margin-top: 21px;
			border-radius: 3px;
			overflow: hidden;
			position: relative;
			.num {
				color: white;
				margin-top: 7px;
				width: 13px;
				height: 26px;
				line-height: 26px;
				padding: 0 6px 0 6px;
				background-color: $uni-color-primary;
				transition: 0.1s;
				// transform: rotate();
			}

			.checked {
				width: 100%;
				height: 100%;
				line-height: 40px;
				margin-top: 0px;
			}

			.ctt {
				position: absolute;
				top: 8px;
				left: 40px;
				transition: all 0.5s;
				color: #000;
			}

			.iceAnimation {
				margin-left: -26px;
				color: white;
			}

			.iceAnimationNoLeft {
				color: white;
			}

			.cttChecked {
				color: white !important;
				// text-shadow: 1px 1px 1px black;
			}
		}
	}
</style>